<template>
<el-card class="sale-view">
  <!-- 头部 -->
  <template v-slot:header>
  <div class="sale-header">
    <el-menu :default-active="activeIndex"  mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">销售额</el-menu-item>
      <el-menu-item index="2">访问量</el-menu-item>
    </el-menu>
    <div class="right">
      <el-radio-group v-model="radioselect" style="margin-right: 10px" size="small">
        <el-radio-button label="今日" ></el-radio-button>
        <el-radio-button label="本周"></el-radio-button>
        <el-radio-button label="本月"></el-radio-button>
        <el-radio-button label="今年"></el-radio-button>
      </el-radio-group>
      <el-date-picker
      size="small"
      value-format="yyy-MM-dd"
        v-model="datas"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>
  </div>
  </template>
  <!--展示区  -->
  <div class="chart-wrap">
    <v-echarts :options="getOptions()" class="chart" autoresize></v-echarts>
    <div class="list-wrap">
      <div class="title">门店{{activeIndex ==="1" ? "销售额" : "访问量" }}排名</div>
      <div class="list">
        <div class="item" v-for="item in rankData" :key="item.no">
          <div class="no " :class="{top : item.no<4}">{{item.no}}</div>
          <div class="name">{{item.name}}</div>
          <div class="count">{{item.count}}</div>
        </div>
      </div>
    </div>
  </div>
</el-card>
</template>

<script>
import { mapState } from 'vuex';
export default {
name:"SaleView",
data(){
  return {
    activeIndex: '1',
    radioselect:"本周",
    datas:[],
     pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
  }
},
computed:{
    ...mapState({
      // 销售额
      orderFullYearAxis: state => state.data.reportData.orderFullYearAxis,
      orderFullYear: state => state.data.reportData.orderFullYear,
      // 访问量
      userFullYearAxis: state => state.data.reportData.userFullYearAxis,
      userFullYear: state => state.data.reportData.userFullYear,
      orderRank: state => state.data.reportData.orderRank,
      userRank: state => state.data.reportData.userRank,
    }),
    // 通过计算属性计算出要显示的数据
    rankData(){
      return this.activeIndex === "1" ? this.orderRank : this.userRank
    }

},
methods: {
  handleSelect(key, keyPath) {
        console.log(key, keyPath);
        this.activeIndex=key
    },
    // 得到柱状图的配置对象
    getOptions () {
      const text = this.activeIndex === "1" ? "销售额趋势" : "访问量趋势"
      const xAxisData = this.activeIndex === "1" ? this.orderFullYearAxis : this.userFullYearAxis
      const data = this.activeIndex === "1" ? this.orderFullYear : this.userFullYear
      return { 
        title: {
          text,
          left:15,
          textStyle: {
            fontSize:16
          }

          },
        // x轴
        xAxis: {
          // show: false,
          data:xAxisData,
          axisTick:{
            alignWithLabel:true
          }
        },
        // y轴
        yAxis: {
          // show: false,
          // 竖线
          axisLine:{
            show:false
          },
          // 刻度线
          axisTick:{
            show:false
          },
          // 分隔线
          splitLine:{
            lineStyle: {
              color:"#eee"
            }
          }
        },
        // 系列
        series:[
          {
            type:"bar",
            data,
            barWidth:"40%"
            
          }
        ],
        // 提示
        tooltip: {

        },
        // 网格
        grid: {
          left: 50,
          top:50,
          bottom:50,
          right:50,
        },
        // 颜色
        color: "yellowGREEN"
      }
    }
}
}
</script>

<style lang="scss" scoped>
.sale-view {
  margin-top: 20px;
  ::v-deep.el-card__header {
    border-bottom: none;
    padding: 0;
  }
  .sale-header{
    margin:0 20px;
    position: relative;
    .right {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;

    }
  }
  .chart-wrap {
    display: flex;
    height: 270px;
    .chart {
      flex: 5;
      // background-color:#eee;
      margin-right: 20px;
    }
    .list-wrap {
      flex:2;
    }
  }
  .list-wrap {
    .title {
      margin-top: 20px;
      font-size: 16px;
      font-weight: 500;
    }
    .list {
      margin-top: 20px;
      .item {
        display: flex;
        margin: 6px 20px 6px 0;
        font-size: 14px;
        .no {
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          &.top {
            border-radius: 20px;
            background: #000;
            color: white;
          }
        }
         .name {
            margin-left: 10px;
          }
          .count {
            flex: 1;
            text-align: right;
          }
      }
    }
  }
}
</style>